<template>
  <div>
    <!-- 头部组件 -->
    <tmsHeader :tmsheader="tmsheader"></tmsHeader>

    <!-- 预付运费 -->
     <div class="dingDanTitle">
     <div>预付运费<span>50000</span></div>
   </div>
    <!-- 数据渲染 -->
    <div  v-for="(item,index) in tmsPayTabaData" :key="index">
    <el-row class="title">{{item.titleName}}</el-row>
        <div class="overflowTables">
          <el-table  border  tooltip-effect="dark" >
            <el-table-column  v-for="(itemcolumn,indexC) in item.tableColumn" :key="indexC" prop="" :label="itemcolumn" align="center" width=150>
            </el-table-column>
          </el-table>
        </div>
      </div>
         <!--附件-->
    <el-row>
      <h4 class="title">附件</h4>
      <el-upload
          id="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-row>
       <el-row class="title">备注</el-row>
        <el-input class="bzinput" type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input> 
        <el-col class="btngroup">
             <el-button type="success" round>提交</el-button>
             <el-button type="info" @click="returnTo()" round>返回</el-button>
             
        </el-col>
  </div>
</template>

<script>
import tmsHeader from '../../TmsHeader';
export default {
  name: "Settlement",
  data() {
    return {
      //头部组件的参数
      tmsheader: {
        tmsBigTitle: "运输端",
        tmsATitle: "结算管理",
        tmsBTitle: "回单处理",
      },
      //表格数据
      tmsPayTabaData: [
        {
          titleName: "货物信息",
          tableColumn: {
            djh: "订单号",
            htbh: "合同编号",
            ydh: "运单号",
            jhzhtime: "计划装货时间",
            jhdhtime: "计划到货时间",
            addressFrom: "始发地",
            addressTo: "目的地",
            wtf: "委托方",
            wtr: "委托人",
            wtTel: "委托电话",
            wtAddress: "委托地址",
            shf: "收货方",
            shr: "收货人",
            shTel: "收货电话",
            shAddress: "收货地址",
            goods: "货名",
            ggxh: "规格型号",
            zbz: "总包装",
            zsl: "总数量",
            zzl: "总重量kg",
            ztj: "总体积",
            thr: "提货联系人",
            thTle: "提货电话",
            thAdress: "提货地址",
            djbz: "订单备注"

          },
        },
         {
          titleName: "计划运费",
             tableColumn: {
            wtf: "单价",
            wtr: "总里程（km）",
            lxdh: "运输费（￥）",
            thdz: "其他费用（￥）",
            lxdh: "费用总计（￥）"
          }
        },
           {
          titleName: "实际运费",
          tableColumn: {
            wtf: "单价",
            wtr: "总里程（km）",
            lxdh: "运输费（￥）",
            thdz: "其他费用（￥）",
            thlxr: "额外费用（￥）",
            lxdh: "费用总计（￥）"
          }
        }
      ],
      //备注文本域的数据
      textarea:"",
      //上传附件的属性
      dialogImageUrl: '',
      dialogVisible: false

    };
  },
  components: {
    tmsHeader,
  },

  methods: {
      returnTo(){
        this.$router.push('/client/Settlement')
      },
      /* 上传附件事件 */
       handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
};
</script>
<style scoped lang="less">
.dingDanTitle{
  width: 15%;
  border-left:7px solid #42BD86 ;
  margin-top: 30px;
  div{
    font-weight: 600;
    
    span{
      color: red;
      padding-left:10px;
      font-style:italic
    }
  }
}
.overflowTables{
  overflow: auto;
  
}
.btngroup{
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 20px;
}
/deep/ .el-upload{
  float: left;
  
}
 .bzinput{
    width: 50%;
    float: left;
}
.el-table {
  display: table-cell;
}
.title {
  width: 15%;
  border-top: 2px solid #f56c6c;
  font-weight: 600;
  font: 30px;
  padding:10px 0px;
  margin-top: 30px;
}
</style>